import React, { Suspense } from 'react';

// Simulate fetching data (e.g., from an API)
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
};

// Create a resource that Suspense can use
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// Component that reads from the resource
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Name: {data.name}
      
Age: {data.age}
    
  );
};

const App = () => {
  return (
    Loading user data...

এই উদাহরণে:

• `fetchData` একটি অ্যাসিঙ্ক্রোনাস ডেটা ফেচিং অপারেশন অনুকরণ করে।
• `createResource` একটি রিসোর্স তৈরি করে যা সাসপেন্স ডেটার লোডিং স্টেট ট্র্যাক করতে ব্যবহার করতে পারে।
• `UserProfile` রিসোর্স থেকে `read` মেথড ব্যবহার করে ডেটা পড়ে। যদি ডেটা এখনও উপলব্ধ না হয়, তবে এটি একটি প্রমিস থ্রো করে, যা কম্পোনেন্টটিকে সাসপেন্ড করে।
• `Suspense` কম্পোনেন্টটি `UserProfile` কে র‍্যাপ করে এবং একটি `fallback` প্রপ প্রদান করে, যা কম্পোনেন্টটি সাসপেন্ড থাকা অবস্থায় কোন UI দেখানো হবে তা নির্দিষ্ট করে।

কোড স্প্লিটিংয়ের সাথে সাসপেন্স

সাসপেন্স কোড স্প্লিটিং বাস্তবায়নের জন্য React.lazy এর সাথেও ব্যবহার করা যেতে পারে। এটি আপনাকে কম্পোনেন্টগুলি কেবল তখনই লোড করতে দেয় যখন তাদের প্রয়োজন হয়, যা প্রাথমিক পেজ লোডের পারফরম্যান্স উন্নত করে।

import React, { Suspense, lazy } from 'react';

// Lazy load the MyComponent component
const MyComponent = lazy(() => import('./MyComponent'));

const App = () => {
  return (
    Loading component...}>
      
    
  );
};

export default App;

এই উদাহরণে:

• `React.lazy` `MyComponent` কম্পোনেন্টটি লেজি লোড করতে ব্যবহৃত হয়।
• `Suspense` কম্পোনেন্টটি `MyComponent` কে র‍্যাপ করে এবং একটি `fallback` প্রপ প্রদান করে, যা কম্পোনেন্টটি লোড হওয়ার সময় কোন UI দেখানো হবে তা নির্দিষ্ট করে।

এরর বাউন্ডারি বোঝা

এরর বাউন্ডারি হলো রিঅ্যাক্ট কম্পোনেন্ট যা তাদের চাইল্ড কম্পোনেন্ট ট্রি-এর যেকোনো জায়গায় জাভাস্ক্রিপ্ট এরর ধরে, সেই এররগুলি লগ করে এবং পুরো অ্যাপ্লিকেশনটি ক্র্যাশ করার পরিবর্তে একটি ফলব্যাক UI প্রদর্শন করে। এগুলি অপ্রত্যাশিত ত্রুটিগুলি সুন্দরভাবে পরিচালনা করার একটি উপায় সরবরাহ করে, ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এবং আপনার অ্যাপ্লিকেশনকে আরও শক্তিশালী করে তোলে।

এরর বাউন্ডারির মূল ধারণা

• এরর ক্যাচিং: এরর বাউন্ডারি রেন্ডারিংয়ের সময়, লাইফসাইকেল মেথডে এবং তাদের নীচের পুরো ট্রি-এর কন্সট্রাক্টরের মধ্যে এরর ধরে।
• ফলব্যাক UI: একটি এরর ঘটলে যে UI দেখানো হয়। এটি সাধারণত একটি এরর মেসেজ বা একটি প্লেসহোল্ডার।
• এরর লগিং: এরর বাউন্ডারি আপনাকে ডিবাগিংয়ের উদ্দেশ্যে একটি সার্ভিস বা কনসোলে এরর লগ করার অনুমতি দেয়।
• কম্পোনেন্ট ট্রি আইসোলেশন: এরর বাউন্ডারি কম্পোনেন্ট ট্রি-এর নির্দিষ্ট অংশে এররগুলিকে বিচ্ছিন্ন করে, সেগুলিকে পুরো অ্যাপ্লিকেশন ক্র্যাশ করা থেকে বিরত রাখে।

এরর বাউন্ডারির বেসিক বাস্তবায়ন

এখানে একটি এরর বাউন্ডারি তৈরির একটি সহজ উদাহরণ দেওয়া হলো:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return 
Something went wrong.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

এই উদাহরণে:

• `ErrorBoundary` কম্পোনেন্টটি `getDerivedStateFromError` এবং `componentDidCatch` মেথডগুলি সংজ্ঞায়িত করে।
• `getDerivedStateFromError` একটি চাইল্ড কম্পোনেন্টে এরর ঘটলে কল করা হয়। এটি স্টেট আপডেট করে নির্দেশ করে যে একটি এরর ঘটেছে।
• `componentDidCatch` একটি এরর ধরা পড়ার পরে কল করা হয়। এটি আপনাকে একটি সার্ভিস বা কনসোলে এরর লগ করার অনুমতি দেয়।
• `render` মেথডটি `hasError` স্টেট পরীক্ষা করে এবং যদি একটি এরর ঘটে থাকে তবে একটি ফলব্যাক UI প্রদর্শন করে।

এরর বাউন্ডারি ব্যবহার করা

`ErrorBoundary` কম্পোনেন্টটি ব্যবহার করতে, আপনি যে কম্পোনেন্টগুলিকে সুরক্ষিত করতে চান সেগুলিকে এটি দিয়ে র‍্যাপ করুন:

import React from 'react';
import ErrorBoundary from './ErrorBoundary';

const MyComponent = () => {
  // Simulate an error
  throw new Error('An error occurred!');
};

const App = () => {
  return (
    
      
    
  );
};

export default App;

এই উদাহরণে, যদি `MyComponent`-এ কোনো এরর ঘটে, তাহলে `ErrorBoundary` কম্পোনেন্টটি এররটি ধরবে এবং ফলব্যাক UI প্রদর্শন করবে।

সাসপেন্স এবং এরর বাউন্ডারির সংমিশ্রণ

সাসপেন্স এবং এরর বাউন্ডারি একত্রিত করে অ্যাসিঙ্ক্রোনাস অপারেশনগুলির জন্য একটি শক্তিশালী এবং ব্যাপক এরর হ্যান্ডলিং কৌশল প্রদান করা যেতে পারে। সাসপেন্স এবং এরর বাউন্ডারি উভয় দিয়ে সাসপেন্ড হতে পারে এমন কম্পোনেন্টগুলিকে র‍্যাপ করে, আপনি লোডিং স্টেট এবং অপ্রত্যাশিত এরর উভয়ই সুন্দরভাবে পরিচালনা করতে পারেন।

সাসপেন্স এবং এরর বাউন্ডারি একত্রিত করার উদাহরণ

import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

// Simulate fetching data (e.g., from an API)
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // Simulate a successful data fetch
      // resolve({ name: 'John Doe', age: 30 });

      // Simulate an error during data fetching
      reject(new Error('Failed to fetch user data'));

    }, 2000);
  });
};

// Create a resource that Suspense can use
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// Component that reads from the resource
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Name: {data.name}
      
Age: {data.age}
    
  );
};

const App = () => {
  return (
    
      Loading user data...}>
        
      
    
  );
};

export default App;

এই উদাহরণে:

• `ErrorBoundary` কম্পোনেন্টটি `Suspense` কম্পোনেন্টটিকে র‍্যাপ করে।
• `Suspense` কম্পোনেন্টটি `UserProfile` কম্পোনেন্টটিকে র‍্যাপ করে।
• যদি `fetchData` ফাংশনটি একটি এরর সহ রিজেক্ট হয়, `Suspense` কম্পোনেন্টটি প্রমিস রিজেকশনটি ধরবে, এবং `ErrorBoundary` সাসপেন্স দ্বারা থ্রো করা এররটি ধরবে।
• `ErrorBoundary` তখন ফলব্যাক UI প্রদর্শন করবে।
• যদি ডেটা সফলভাবে ফেচ হয়, `Suspense` কম্পোনেন্টটি `UserProfile` কম্পোনেন্টটি প্রদর্শন করবে।

উন্নত কৌশল এবং সেরা অনুশীলন

সাসপেন্স পারফরম্যান্স অপটিমাইজ করা

• মেমোাইজেশন ব্যবহার করুন: সাসপেন্স বাউন্ডারির মধ্যে রেন্ডার করা কম্পোনেন্টগুলিকে মেমোাইজ করুন যাতে অপ্রয়োজনীয় রি-রেন্ডার প্রতিরোধ করা যায়।
• গভীর সাসপেন্স ট্রি এড়িয়ে চলুন: রেন্ডারিং পারফরম্যান্সের উপর প্রভাব কমাতে সাসপেন্স ট্রি অগভীর রাখুন।
• ডেটা প্রিফেচ করুন: সাসপেনশনের সম্ভাবনা কমাতে প্রয়োজনের আগেই ডেটা প্রিফেচ করুন।

কাস্টম এরর বাউন্ডারি

আপনি নির্দিষ্ট ধরণের এরর পরিচালনা করতে বা আরও তথ্যপূর্ণ এরর মেসেজ সরবরাহ করতে কাস্টম এরর বাউন্ডারি তৈরি করতে পারেন। উদাহরণস্বরূপ, আপনি এমন একটি এরর বাউন্ডারি তৈরি করতে পারেন যা ঘটিত এররের ধরণের উপর ভিত্তি করে একটি ভিন্ন ফলব্যাক UI প্রদর্শন করে।

সাসপেন্সের সাথে সার্ভার-সাইড রেন্ডারিং (SSR)

প্রাথমিক পেজ লোড পারফরম্যান্স উন্নত করতে সাসপেন্স সার্ভার-সাইড রেন্ডারিং (SSR)-এর সাথে ব্যবহার করা যেতে পারে। SSR ব্যবহার করার সময়, আপনি সার্ভারে আপনার অ্যাপ্লিকেশনের প্রাথমিক অবস্থা প্রি-রেন্ডার করতে পারেন এবং তারপরে বাকি বিষয়বস্তু ক্লায়েন্টে স্ট্রিম করতে পারেন। সাসপেন্স আপনাকে SSR চলাকালীন অ্যাসিঙ্ক্রোনাস ডেটা ফেচিং পরিচালনা করতে এবং ডেটা স্ট্রিম হওয়ার সময় লোডিং ইন্ডিকেটর প্রদর্শন করতে দেয়।

বিভিন্ন এরর পরিস্থিতি সামলানো

এই বিভিন্ন এরর পরিস্থিতিগুলি বিবেচনা করুন এবং কীভাবে সেগুলি পরিচালনা করবেন:

• নেটওয়ার্ক এরর: ব্যবহারকারীকে একটি তথ্যপূর্ণ এরর মেসেজ দেখিয়ে নেটওয়ার্ক এররগুলি সুন্দরভাবে পরিচালনা করুন।
• API এরর: যে এররটি ঘটেছে তার জন্য নির্দিষ্ট একটি এরর মেসেজ দেখিয়ে API এররগুলি পরিচালনা করুন।
• অপ্রত্যাশিত এরর: এররটি লগ করে এবং ব্যবহারকারীকে একটি জেনেরিক এরর মেসেজ দেখিয়ে অপ্রত্যাশিত এররগুলি পরিচালনা করুন।

গ্লোবাল এরর হ্যান্ডলিং

এরর বাউন্ডারি দ্বারা ধরা পড়েনি এমন এররগুলি ধরার জন্য একটি গ্লোবাল এরর হ্যান্ডলিং ব্যবস্থা প্রয়োগ করুন। এটি একটি গ্লোবাল এরর হ্যান্ডলার ব্যবহার করে বা পুরো অ্যাপ্লিকেশনটিকে একটি এরর বাউন্ডারিতে র‍্যাপ করে করা যেতে পারে।

বাস্তব-বিশ্বের উদাহরণ এবং ব্যবহারের ক্ষেত্র

ই-কমার্স অ্যাপ্লিকেশন

একটি ই-কমার্স অ্যাপ্লিকেশনে, পণ্যের ডেটা ফেচ করার সময় লোডিং ইন্ডিকেটর দেখানোর জন্য সাসপেন্স ব্যবহার করা যেতে পারে এবং চেকআউট প্রক্রিয়া চলাকালীন ঘটিত এররগুলি পরিচালনা করার জন্য এরর বাউন্ডারি ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, কল্পনা করুন জাপানের একজন ব্যবহারকারী মার্কিন যুক্তরাষ্ট্রে অবস্থিত একটি অনলাইন স্টোর ব্রাউজ করছেন। পণ্যের ছবি এবং বিবরণ লোড হতে কিছু সময় লাগতে পারে। সাসপেন্স এই ডেটা বিশ্বের অর্ধেক পথ দূরে থাকা একটি সার্ভার থেকে ফেচ হওয়ার সময় একটি সাধারণ লোডিং অ্যানিমেশন দেখাতে পারে। যদি একটি অস্থায়ী নেটওয়ার্ক সমস্যার কারণে (বিশ্বব্যাপী বিভিন্ন ইন্টারনেট পরিকাঠামোতে যা সাধারণ) পেমেন্ট গেটওয়ে ব্যর্থ হয়, একটি এরর বাউন্ডারি ব্যবহারকারী-বান্ধব বার্তা প্রদর্শন করতে পারে যা তাদের পরে আবার চেষ্টা করতে বলবে।

সোশ্যাল মিডিয়া প্ল্যাটফর্ম

একটি সোশ্যাল মিডিয়া প্ল্যাটফর্মে, ব্যবহারকারীর প্রোফাইল এবং পোস্ট ফেচ করার সময় লোডিং ইন্ডিকেটর দেখানোর জন্য সাসপেন্স ব্যবহার করা যেতে পারে এবং ছবি বা ভিডিও লোড করার সময় ঘটিত এররগুলি পরিচালনা করার জন্য এরর বাউন্ডারি ব্যবহার করা যেতে পারে। ভারত থেকে ব্রাউজ করা একজন ব্যবহারকারী ইউরোপের সার্ভারে হোস্ট করা মিডিয়ার জন্য ধীর লোডিং সময় অনুভব করতে পারেন। সাসপেন্স কন্টেন্ট সম্পূর্ণরূপে লোড না হওয়া পর্যন্ত একটি প্লেসহোল্ডার দেখাতে পারে। যদি কোনো নির্দিষ্ট ব্যবহারকারীর প্রোফাইল ডেটা করাপ্ট হয়ে যায় (বিরল কিন্তু সম্ভব), একটি এরর বাউন্ডারি পুরো সোশ্যাল মিডিয়া ফিডকে ক্র্যাশ করা থেকে আটকাতে পারে এবং পরিবর্তে "ব্যবহারকারীর প্রোফাইল লোড করা সম্ভব হচ্ছে না" এর মতো একটি সাধারণ এরর মেসেজ প্রদর্শন করতে পারে।

ড্যাশবোর্ড অ্যাপ্লিকেশন

একটি ড্যাশবোর্ড অ্যাপ্লিকেশনে, একাধিক উৎস থেকে ডেটা ফেচ করার সময় লোডিং ইন্ডিকেটর দেখানোর জন্য সাসপেন্স ব্যবহার করা যেতে পারে এবং চার্ট বা গ্রাফ লোড করার সময় ঘটিত এররগুলি পরিচালনা করার জন্য এরর বাউন্ডারি ব্যবহার করা যেতে পারে। লন্ডনের একজন আর্থিক বিশ্লেষক একটি বিশ্বব্যাপী বিনিয়োগ ড্যাশবোর্ড অ্যাক্সেস করার সময় বিশ্বের বিভিন্ন এক্সচেঞ্জ থেকে ডেটা লোড করতে পারেন। সাসপেন্স প্রতিটি ডেটা উৎসের জন্য লোডিং ইন্ডিকেটর সরবরাহ করতে পারে। যদি কোনো একটি এক্সচেঞ্জের API ডাউন থাকে, একটি এরর বাউন্ডারি বিশেষভাবে সেই এক্সচেঞ্জের ডেটার জন্য একটি এরর মেসেজ প্রদর্শন করতে পারে, যা পুরো ড্যাশবোর্ডটিকে অব্যবহারযোগ্য হওয়া থেকে বিরত রাখে।

উপসংহার

রিঅ্যাক্ট সাসপেন্স এবং এরর বাউন্ডারি স্থিতিস্থাপক এবং ব্যবহারকারী-বান্ধব রিঅ্যাক্ট অ্যাপ্লিকেশন তৈরির জন্য অপরিহার্য সরঞ্জাম। লোডিং স্টেট পরিচালনা করতে সাসপেন্স এবং অপ্রত্যাশিত এররগুলি পরিচালনা করতে এরর বাউন্ডারি ব্যবহার করে, আপনি সামগ্রিক ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এবং ডেভেলপমেন্ট প্রক্রিয়াকে সহজ করতে পারেন। এই নির্দেশিকাটি সাসপেন্স এবং এরর বাউন্ডারির একটি ব্যাপক সংক্ষিপ্ত বিবরণ প্রদান করেছে, যেখানে বেসিক ধারণা থেকে শুরু করে উন্নত কৌশল পর্যন্ত সবকিছু কভার করা হয়েছে। এই নিবন্ধে বর্ণিত সেরা অনুশীলনগুলি অনুসরণ করে, আপনি শক্তিশালী এবং নির্ভরযোগ্য রিঅ্যাক্ট অ্যাপ্লিকেশন তৈরি করতে পারেন যা এমনকি সবচেয়ে চ্যালেঞ্জিং পরিস্থিতিও সামলাতে পারে।

রিঅ্যাক্ট যেমন বিকশিত হতে থাকবে, সাসপেন্স এবং এরর বাউন্ডারি আধুনিক ওয়েব অ্যাপ্লিকেশন তৈরিতে সম্ভবত ক্রমবর্ধমান গুরুত্বপূর্ণ ভূমিকা পালন করবে। এই ফিচারগুলিতে দক্ষতা অর্জন করে, আপনি সময়ের সাথে তাল মিলিয়ে চলতে এবং ব্যতিক্রমী ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে পারবেন।